/*
 * @Author: jiayu
 * @Date: 2022-08-04 16:12:56
 * @LastEditors: jiayu
 * @LastEditTime: 2022-09-29 15:56:06
 * @Description:
 */
import Card from '@/components/Card';
import { Pie } from '@ant-design/plots';
import { Button, Popover } from 'antd';
import { Dispatch, memo, SetStateAction, useEffect, useState } from 'react';
import styles from './index.less';

import { FullscreenOutlined, FullscreenExitOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import React from 'react';
import { useModel } from '@umijs/max';
import { instance } from '@/services/jy-api/api';
import { useOrganizationalStore } from '';

const RightContentRender: React.FC<ChartSctionProps> = (props) => {
  const { isModal, full, fullHandle } = props
  const click = () => {
    if (isModal) {
      full && full(false)
    } else {
      fullHandle && fullHandle('section1')
      full && full(true)
    }
  }
  return <div className={styles.rightToolBar}>
    <Button icon={isModal ? <FullscreenExitOutlined /> : <FullscreenOutlined />} onClick={click}></Button>
  </div>
}

export interface ChartSctionProps {
  isModal?: boolean,
  full?: Dispatch<SetStateAction<boolean>>
  fullHandle?: (val: string) => void
}

const Index: React.FC<ChartSctionProps> = memo((props) => {
  const [config, setConfig] = useState<any>()
  const [data, setData] = useState<any>()
  const [rankList, setRankList] = useState<any[]>([])
  const { currentDepartmentId } = useModel('organizational')

  const getData = () => {
    instance('/index/Screen/studyDuration', {
      params: {
        department_id: currentDepartmentId
      }
    }).then(data => {
      let x: any[] = []
      const rankData = {}
      data.data.forEach((item: { list: any[]; months: any; }) => {
        const list = item.list.map((_item: any) => {
          if (!rankData[_item.department]) {
            rankData[_item.department] = _item.duration
          } else {
            rankData[_item.department] = rankData[_item.department] + _item.duration
          }
          return {
            ..._item,
            date: item.months,
            category: _item.department.toString()
          }
        })
        x = x.concat(list)
      })
      const _rankList = Object.keys(rankData).map(key => {
        return {
          name: key,
          value: rankData[key]
        }
      }).slice(0, 10)
      setRankList(_rankList.sort((a, b) => b.value - a.value))
      const config = {
        data: _rankList.sort((a, b) => b.value - a.value),
        xField: 'value',
        yField: 'name',
        seriesField: 'name',
        legend: {
          position: 'top-left',
        },
      }
      setConfig(config)
    })
  }
  useEffect(() => {
    if (currentDepartmentId) {
      // getData()
      asyncFetch()
    }
  }, [currentDepartmentId]);

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
  const data1 = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
    {
      type: '分类三',
      value: 18,
    },
    {
      type: '分类四',
      value: 15,
    },
    {
      type: '分类五',
      value: 10,
    },
    {
      type: '其他',
      value: 5,
    },
  ];
  const config2 = {
    appendPadding: 0,
    data: data1,
    angleField: 'value',
    colorField: 'type',
    radius: 0.65,
    innerRadius: 0.6,
    label: {
      type: 'spider',
      labelHeight: 28,
      content: '{name}\n{percentage}',
      style: {
        fill: '#ffffff',
        fontSize: 14
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
    legend: false,
    statistic: false,
  };

  return (
    <div className={styles.section}>
      <Card TitleRnder={'课程分类'} RightContentRender={<RightContentRender {...props} />}>
        {
          <Pie height={300} {...config2} />
        }
      </Card>
    </div>
  );
});

export default Index;

